<template>
    <div class="search_div">
        <div class="search">
            <i class="icont_search"></i>
            <input 
            ref="input"
            :type="type"
            :placeholder="placeholder"
            :name="name"
            :maxlength="maxlength"
            v-on:input="handleValueChange($event)"
             />

        </div>
    </div>
</template>

<script>
export default {
  props: {
    type: String,
    placeholder: String,
    name: String,
    maxlength: String
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {
    handleValueChange: function(e) {
      this.$emit("input", e.target.value, this.name);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.search_div {
  width: 100%;
  padding: 10px 0;
  // background: #fff;
  // border-bottom: 1px solid #e1e1e1;
  .search {
    margin-left: 10px;
    margin-right: 10px;
    height: 30px;
    border-radius: 30px;
    border: 2px solid #333;
    display: flex;
    .icont_search {
      background: url("../../../static/image/search.png") no-repeat 0 4px;
      background-size: 100%;
      margin-left: 10px;
      width: 25px;
      height: 25px;
      display: inline-block;
    }
    input {
      height: 30px;
      flex: 1;
      border: none;
      background: none;
      outline: none;
    }
  }
}
</style>
